<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
              integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
              crossorigin="anonymous">
        <title>Страница "Калькулятор" - Demosite</title>
        <link href="https://getbootstrap.com/docs/4.1/examples/sticky-footer-navbar/sticky-footer-navbar.css"
              rel="stylesheet">
    </head>
    <body>
        <header>
            <!-- Fixed navbar -->
            <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
                <a class="navbar-brand" href="/">Demosite</a>
                <div class="collapse navbar-collapse" id="navbarCollapse">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item active">
                            <a class="nav-link" href="/calc">Калькулятор</a>
                        </li>
                    </ul>
                    <ul class="navbar-nav mr-1">
                        <li class="nav-item">
                            <a class="nav-link active" href="/logout">Выйти</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </header>

        <main role="main" class="container">
            <div class="row mt-5">
                <div class="col">
                    <div class="card ">
                        <div class="card-header">
                            Ввод данных
                        </div>
                        <div class="card-body">
                            <form action="/calc" method="post">
                                <div class="form-group form-row">
                                    <div class="col col-form-label">
                                        <label for="value_a">Первое число:</label>
                                    </div>
                                    <div class="col">
                                        <input id="value_a" type="number" class="form-control"
                                               placeholder="Введите число">
                                    </div>
                                </div>
                                <div class="form-group form-row">
                                    <div class="col col-form-label">
                                        <label for="value_b">Второе число:</label>
                                    </div>
                                    <div class="col align-items-center">
                                        <input id="value_b" type="number" class="form-control"
                                               placeholder="Введите число">
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="col">
                                        <input type="submit" class="btn btn-primary float-right btn-block" value="Вычислить">
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card h-100">
                        <div class="card-header">
                            Результат вычисления
                        </div>
                        <div class="card-body">
                            <ul>
                                <li>
                                    <blockquote class="blockquote">
                                        <p class="mb-0">Первое число: 100</p>
                                    </blockquote>
                                </li>
                                <li>
                                    <blockquote class="blockquote">
                                        <p class="mb-0">Второе число: 200</p>
                                    </blockquote>
                                </li>
                                <li>
                                    <blockquote class="blockquote">
                                        <p class="mb-0">Сумма чисел 100 и 200 равна 300</p>
                                    </blockquote>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mt-4">
                <div class="col">
                    <div class="card ">
                        <div class="card-header">
                            История вычислений
                        </div>
                        <div class="card-body">
                            <table class="table text-center table-striped">
                                <thead class="thead-dark">
                                    <th><b>ID</b></th>
                                    <th><b>Дата</b></th>
                                    <th><b>Первое число</b></th>
                                    <th><b>Второе число</b></th>
                                    <th><b>Результат</b></th>
                                </thead>

                                <tr>
                                    <td>1</td>
                                    <td>21.12.2012 00:00</td>
                                    <td>100</td>
                                    <td>200</td>
                                    <td>300</td>
                                </tr>
                                <tr>
                                    <td>1</td>
                                    <td>21.12.2012 00:00</td>
                                    <td>100</td>
                                    <td>200</td>
                                    <td>300</td>
                                </tr>
                                <tr>
                                    <td>1</td>
                                    <td>21.12.2012 00:00</td>
                                    <td>100</td>
                                    <td>200</td>
                                    <td>300</td>
                                </tr>
                                <tr>
                                    <td>1</td>
                                    <td>21.12.2012 00:00</td>
                                    <td>100</td>
                                    <td>200</td>
                                    <td>300</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

        </main>

        <footer class="footer">
            <div class="container text-right">
                <span class="text-muted">&copy; ШП, 2018</span>
            </div>
        </footer>

    </body>
</html>
